<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<navigation-bar title="消息" :back="true" @back="onBackTap"></navigation-bar>
		
		<!-- 消息中心区域 -->
		<view class="message-section">
			<!-- 消息标题 -->
			<view class="section-header">
				<text class="section-title">消息中心</text>
			</view>

			<!-- 搜索区域 -->
			<view class="search-section">
				<view class="search-box">
					<image class="search-icon" src="/static/search.svg"></image>
					<input class="search-input" placeholder="搜索消息" v-model="searchValue" @input="onSearchInput" @confirm="onSearchSubmit"></input>
				</view>
			</view>

			<!-- 标签栏 -->
			<view class="tabs-section">
				<view class="tabs-container">
					<view 
						v-for="(tab, index) in tabs" 
						:key="index"
						class="tab-item"
						:class="{ active: activeTab === index }"
						:data-index="index"
						@tap="onTabChange"
					>
						<text class="tab-text">{{ tab }}</text>
					</view>
				</view>
			</view>

			<!-- 消息列表 -->
			<scroll-view class="message-list-scroll" scroll-y>
				<view class="message-list">
					<view 
						v-for="message in filteredMessages" 
						:key="message.id"
						class="message-item"
						:class="{ unread: message.unread }"
						:data-id="message.id"
						@tap="onMessageTap"
					>
						<view class="message-avatar">
							<image :src="message.avatar" class="avatar-image"></image>
							<view v-if="message.badge > 0" class="badge">{{ message.badge }}</view>
						</view>
						<view class="message-content">
							<view class="message-header">
								<text class="message-title">{{ message.title }}</text>
								<text class="message-time">{{ message.time }}</text>
							</view>
							<text class="message-text">{{ message.content }}</text>
						</view>
						<view class="message-actions">
							<view class="action-btn" :data-id="message.id" @tap.stop="onDeleteMessage">
								<image class="delete-icon" src="/static/delete.svg"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部导航栏 -->
		<bottom-navigation current-page="message" @navigate="onNavigate"></bottom-navigation>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				activeTab: 0,
				tabs: ['全部', '系统通知', '学习提醒', '互动消息'],
				messages: [
					{
						id: 1,
						type: 'system',
						avatar: '/static/system-avatar.svg',
						title: '系统通知',
						content: '您的作业已批改完成，快来查看吧！',
						time: '10:30',
						unread: true,
						badge: 2
					},
					{
						id: 2,
						type: 'study',
						avatar: '/static/study-avatar.svg',
						title: '学习提醒',
						content: '今日学习任务还未完成，继续加油！',
						time: '09:15',
						unread: true,
						badge: 1
					},
					{
						id: 3,
						type: 'interaction',
						avatar: '/static/teacher-avatar.svg',
						title: '张老师',
						content: '你的数学作业完成得很好，继续保持！',
						time: '昨天',
						unread: false,
						badge: 0
					},
					{
						id: 4,
						type: 'system',
						avatar: '/static/system-avatar.svg',
						title: '版本更新',
						content: '新版本已发布，包含更多学习功能',
						time: '昨天',
						unread: false,
						badge: 0
					},
					{
						id: 5,
						type: 'study',
						avatar: '/static/study-avatar.svg',
						title: '每日打卡',
						content: '恭喜你完成今日学习打卡！',
						time: '2天前',
						unread: false,
						badge: 0
					}
				]
			}
		},
		computed: {
			filteredMessages() {
				let filtered = this.messages;
				
				// 按标签过滤
				if (this.activeTab > 0) {
					const typeMap = ['', 'system', 'study', 'interaction'];
					const filterType = typeMap[this.activeTab];
					filtered = filtered.filter(msg => msg.type === filterType);
				}
				
				// 按搜索关键词过滤
				if (this.searchValue.trim()) {
					const keyword = this.searchValue.toLowerCase();
					filtered = filtered.filter(msg => 
						msg.title.toLowerCase().includes(keyword) || 
						msg.content.toLowerCase().includes(keyword)
					);
				}
				
				return filtered;
			}
		},
		onLoad: function (options) {
			console.log('消息页面加载');
		},
		onShow: function () {
			console.log('消息页面显示');
		},
		methods: {
			// 返回上一页
			onBackTap: function() {
				uni.navigateBack();
			},
			// 搜索输入
			onSearchInput: function(e) {
				this.searchValue = e.detail.value;
			},
			// 搜索提交
			onSearchSubmit: function(e) {
				const searchValue = e.detail.value;
				console.log('搜索:', searchValue);
				// 这里可以添加搜索逻辑
			},
			// 切换标签
			onTabChange: function(e) {
				const index = e.currentTarget.dataset.index;
				this.activeTab = index;
				console.log('切换到标签:', this.tabs[index]);
			},
			// 点击消息项
			onMessageTap: function(e) {
				const messageId = e.currentTarget.dataset.id;
				console.log('点击消息:', messageId);
				
				// 标记消息为已读
				const messages = this.messages.map(msg => {
					if (msg.id === messageId) {
						return { ...msg, unread: false, badge: 0 };
					}
					return msg;
				});
				
				this.messages = messages;
				
				// 这里可以跳转到消息详情页面
				// uni.navigateTo({
				//   url: `/pages/message-detail/message-detail?id=${messageId}`
				// });
			},
			// 删除消息
			onDeleteMessage: function(e) {
				const messageId = e.currentTarget.dataset.id;
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条消息吗？',
					success: (res) => {
						if (res.confirm) {
							const messages = this.messages.filter(msg => msg.id !== messageId);
							this.messages = messages;
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			// 全局导航栏事件处理
			onNavigate: function(e) {
				const page = e.detail.page;
				console.log('导航到页面:', page);
				// 导航逻辑已在组件内部处理
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		position: relative;
		overflow: hidden;
	}

	.container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		z-index: -1;
	}

	/* 消息中心区域 */
	.message-section {
		background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
		border-radius: 0;
		margin-top: -15px;
		flex: 1;
		display: flex;
		flex-direction: column;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
		overflow: hidden;
	}

	.message-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	}

	.section-header {
		padding: 12px 20px 8px 20px;
		text-align: center;
		border-bottom: 1px solid rgba(102, 126, 234, 0.1);
	}

	.section-title {
		font-size: 24px;
		font-weight: 700;
		color: #1e293b;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.section-subtitle {
		font-size: 14px;
		color: #6b7280;
		font-weight: 500;
	}

	/* 搜索区域 */
	.search-section {
		padding: 0 20px 4px 20px;
	}

	.search-box {
		display: flex;
		align-items: center;
		background: #f8fafc;
		border-radius: 25px;
		padding: 12px 20px;
		gap: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		border: 1px solid rgba(0, 0, 0, 0.05);
	}

	.search-icon {
		width: 20px;
		height: 20px;
		opacity: 0.6;
	}

	.search-input {
		flex: 1;
		font-size: 16px;
		color: #374151;
		background: transparent;
		border: none;
		outline: none;
	}

	.search-input::placeholder {
		color: #9ca3af;
	}

	/* 标签栏 */
	.tabs-section {
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid rgba(102, 126, 234, 0.1);
	}

	.tabs-container {
		display: flex;
		padding: 0 20px;
	}

	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 0;
		position: relative;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		border-bottom: 3px solid #667eea;
		background: rgba(102, 126, 234, 0.05);
	}

	.tab-text {
		font-size: 16px;
		color: #6b7280;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.tab-item.active .tab-text {
		color: #667eea;
		font-weight: 600;
	}

	/* 消息列表 */
	.message-list-scroll {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.message-list {
		padding: 8px 20px 12px 20px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.message-item {
		display: flex;
		align-items: center;
		padding: 16px;
		background: white;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		border: 1px solid rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.message-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.message-item:active {
		transform: translateY(-2px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	}

	.message-item.unread {
		background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
		border: 1px solid rgba(245, 158, 11, 0.2);
	}

	.message-item.unread::before {
		opacity: 1;
	}

	.message-avatar {
		position: relative;
		margin-right: 16px;
	}

	.avatar-image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.badge {
		position: absolute;
		top: -4px;
		right: -4px;
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
		color: white;
		font-size: 12px;
		font-weight: 600;
		padding: 4px 8px;
		border-radius: 12px;
		min-width: 20px;
		text-align: center;
		line-height: 1.2;
		box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
	}

	.message-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.message-title {
		font-size: 16px;
		font-weight: 600;
		color: #1f2937;
	}

	.message-time {
		font-size: 12px;
		color: #9ca3af;
		font-weight: 500;
	}

	.message-text {
		font-size: 14px;
		color: #6b7280;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.message-actions {
		margin-left: 16px;
	}

	.action-btn {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(239, 68, 68, 0.1);
		transition: all 0.3s ease;
		border: 1px solid rgba(239, 68, 68, 0.2);
	}

	.action-btn:active {
		background: rgba(239, 68, 68, 0.2);
		transform: scale(0.95);
	}

	.delete-icon {
		width: 18px;
		height: 18px;
		opacity: 0.7;
	}
</style>


